<template>
  <el-dialog
    v-loading="isLoading"
    title="添加项目"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="close"
  >
    <div>
      <div style="display: flex; padding: 20px 30px">
        <div class="top">
          <!--          <ul style="max-height: 500px;overflow-y: auto">-->
          <!--            <li style="height: 220px" @click="changeChecked(index)" :class="index===checked ? 'checked' : ''" v-for="(item,index) in stageInfo">-->
          <!--              <div style="padding: 10px;height: 220px">-->

          <!--                <img style="max-width: 200px;max-height: 180px;width: auto;height: auto" :src="$store.state.user.BASE_URL + item.peSnapshot" alt="">-->
          <!--                <div style="display: flex;justify-content: center">-->
          <!--                  <span>{{ item.pefName }}</span>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </li>-->
          <!--          </ul>-->
          <div
            class="top-item"
            @click="changeChecked(index)"
            :class="index === checked ? 'checked' : ''"
            v-for="(item, index) in stageInfo"
          >
            <img
              style="
                max-width: 200px;
                max-height: 180px;
                width: auto;
                height: auto;
                box-sizing: border-box;
              "
              :src="$store.state.user.BASE_URL + item.peSnapshot"
              alt=""
            />
            <div style="display: flex; justify-content: center">
              <span>{{ item.pefName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px" class="bottom" v-if="checked !== null">
        <div class="left" v-if="checked !== null">
          <el-button
          size='small'
            :disabled="isDisable"
            type="primary "
            @click="randomChecked"
            style="
              height: 30px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 10px;
            "
            >AI建议</el-button
          >
        </div>
        <div class="right" style="margin-left: 10px">
          <ul>
            <span style="margin-top: 10px"><nobr>模式</nobr></span>
            <li style="display: flex; width: 600px; flex-wrap: wrap">
              <el-button
                style="margin-left: 10px; width: 120px; margin-top: 10px"
                v-for="(item, index) in stageInfo[checked].exerciseVO"
                :type="checkExercise === index ? 'primary' : ''"
                @click="changeAll('checkExercise', index)"
                size='small'
                >{{ item.peName }}</el-button
              >
            </li>
          </ul>
          <ul>
            <span style="margin-top: 10px">组数</span>
            <li>
              <el-button
                @click="changeAll('checkedGroup', index)"
                :type="checkedGroup === index ? 'primary' : ''"
                style="margin-left: 10px; width: 120px; margin-top: 10px"
                v-for="(item, index) in group"
                size='small'
                >{{ item + "组" }}</el-button
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button size='small' @click="close">取 消</el-button>
      <el-button size='small' type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { taskStageInfo } from "@/api/sports/planAdd";
import debounce from "@/utils/debounce";
import { Message } from "element-ui";

export default {
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    esId: {
      type: Number,
    },
    checkedDate: {
      type: Number,
    },
    gradeId: {
      type: String,
    },
  },
  data() {
    return {
      stageInfo: [],
      isLoading: false,
      checked: null,
      checkExercise: null,
      checkedGroup: null,
      timer: null,
      timer1: null,
      timer2: null,
      isDisable: false,
      group: [1, 2, 3],
    };
  },
  created() {
    this.getEsProject();
  },
  watch: {},
  methods: {
    clickMessage: debounce((e) => {
      Message.error(e);
    }, 500),
    changeChecked(index) {
      clearInterval(this.timer);
      this.checked = index;
      this.checkExercise = null;
      this.checkedGroup = null;
      this.isDisable = false;
    },
    close() {
      this.$emit("close");
    },
    changeAll(type, val) {
      this[type] = val;
    },
    getEsProject() {
      taskStageInfo(this.esId).then((response) => {
        if (response.code === 200) {
          this.stageInfo = response.result;
        }
      });
    },
    randomChecked() {
      let gradeSource = ["1", "2", "3"];
      if (this.gradeId) {
        this.isDisable = true;
        this.timer = setInterval(() => {
          this.checkExercise =
            Math.round(
              Math.random() *
                (this.stageInfo[this.checked].exerciseVO.length - 1)
            ) + 0;
          this.checkedGroup =
            Math.round(Math.random() * (this.group.length - 1)) + 0;
        }, 100);
        this.timer1 = setInterval(() => {
          this.checkExercise =
            Math.round(
              Math.random() *
                (this.stageInfo[this.checked].exerciseVO.length - 1)
            ) + 0;
          this.checkedGroup =
            Math.round(Math.random() * (this.group.length - 1)) + 0;
        }, 200);
        this.timer2 = setInterval(() => {
          this.checkExercise =
            Math.round(
              Math.random() *
                (this.stageInfo[this.checked].exerciseVO.length - 1)
            ) + 0;
          this.checkedGroup =
            Math.round(Math.random() * (this.group.length - 1)) + 0;
        }, 900);
        setTimeout(() => {
          clearInterval(this.timer);
          this.timer = null;

        }, 2000);
        setTimeout(() => {
          clearInterval(this.timer1);
          this.timer1 = null;

        }, 4000);
        setTimeout(() => {
          clearInterval(this.timer2);
          this.timer2 = null;
          if (gradeSource.includes(this.gradeId)) {
            this.checkedGroup = 1;
          } else {
            this.checkedGroup = 2;
          }
        }, 6000);
      } else {
        this.clickMessage("请选择学生年级");
      }
    },
    submit() {
      if (this.checkExercise == null) {
        this.clickMessage("请选择模式");
        return;
      }
      if (this.checkedGroup == null) {
        this.clickMessage("请选择组数");
        return;
      }
      if (this.timer && this.timer1 && this.timer2) {
        this.clickMessage("请等待AI执行完毕");
        return;
      }
      let data = {
        ...this.stageInfo[this.checked],
        peEquipment:
          this.stageInfo[this.checked].exerciseVO[this.checkExercise]
            .peEquipment,
        peTime: this.stageInfo[this.checked].exerciseVO[this.checkExercise]
          .peTime
          ? this.stageInfo[this.checked].exerciseVO[this.checkExercise].peTime
          : 0,
        peGroup: this.group[this.checkedGroup],
        peCode:
          this.stageInfo[this.checked].exerciseVO[this.checkExercise].peCode,
        esId: this.esId,
        checkedDate: this.checkedDate + 1,
        peName:
          this.stageInfo[this.checked].exerciseVO[this.checkExercise].peName,
      };
      this.$emit("incrementProject", data);
    },
  },
};
</script>

<style scoped lang="scss">
span {
  padding-top: 4px;
}
ul {
  margin: 0;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
  }
}
::v-deep .el-dialog__body {
  padding: 0px;
}
.top {
  display: flex;
  flex-wrap: wrap;
  .top-item {
    margin-left: 40px;
    margin-top: 20px;
    cursor: pointer;
    transition: 400ms all;
    box-sizing: border-box;
  }
}
.bottom {
  .left {
    margin-right: 6px;
  }
  .right {
    transition: 200ms all;
  }
  padding: 0 50px 30px 50px;
  display: flex;
  ul {
    display: flex;
    li {
      list-style: none;
      margin-left: 8px;
      margin-bottom: 6px;
    }
  }
}
.checked {
  border-radius: 8px;
  color: #409eff;
  box-sizing: border-box;
  background: #edf4ff;
}
</style>


